<template>
  <div class="remote-storage views-container">
    <export-file-in ref="exportFileIn" :config="{title:'文件上传',accept:'.js',api: 'test',params:{kammi_id:1}}"></export-file-in>
    <div class="wlm-form">
      <div class="wlm-form-hearder flex-row flex-justify-b">
        <span>远程存储</span>
        <!-- <el-tooltip class="item" effect="dark" content="点击后清除海报的缓存信息和图片，在点击后的5秒 - 60秒后有效" placement="bottom">
            <el-button @click="clearPoster" plain size="small">清除海报缓存</el-button>
        </el-tooltip>-->
      </div>
      <el-radio-group class="wlm-form-header-radio" v-model="formFormatData.formData.default" @change="resetFieldChange" :disabled="is_storage==1">
        <div class="wlm-form-notice warning" style="margin-left: -41px;margin-top: -10px;">
          <div>温情提示：推荐使用远程存储，将降低服务器加载图片的压力，提升系统的运行加载速度</div>
        </div>
        <el-radio label="local">本地存储</el-radio>
        <el-radio label="aliyun">阿里云OSS</el-radio>
        <el-radio label="qiniu">七牛云存储</el-radio>
        <el-radio label="qcloud">腾讯COS</el-radio>
        <el-radio v-if="isIndependent" label="default">默认</el-radio>
      </el-radio-group>
      <section v-if="formFormatData.formData.default === 'aliyun'">
        <div class="wlm-form-content">
          <el-form ref="aliyun" :model="formFormatData.formData.engine.aliyun" size="small" label-width="140px" class="retail-form" label-position="right">
            <el-form-item label="Access Key" prop="access_key_id" :rules="{required: true, message: 'Access Key不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.access_key_id"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.access_key_id)}}</span>
              <div class="form-help">Access Key ID是您访问阿里云API的密钥。</div>
            </el-form-item>
            <el-form-item label="Secret Key" prop="access_key_secret" :rules="{required: true, message: 'Secret Key不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.access_key_secret"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.access_key_secret)}}</span>
              <div class="form-help">Access Key Secret是您访问阿里云API的密钥。</div>
            </el-form-item>
            <el-form-item label="存储空间 (bucket)" prop="bucket" :rules="{required: true, message: 'bucket不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.bucket"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.bucket)}}</span>
              <div class="form-help">空间名称</div>
            </el-form-item>
            <el-form-item label="自定义URL" prop="domain" :rules="{required: true, message: '访问url不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.aliyun.domain"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.aliyun.domain)}}</span>
              <div class="form-help">请以HTTPS开头</div>
            </el-form-item>
          </el-form>
        </div>
      </section>
      <section v-if="formFormatData.formData.default === 'qiniu'">
        <div class="wlm-form-content">
          <el-form ref="qiniu" :model="formFormatData.formData.engine.qiniu" size="small" label-width="140px" class="retail-form" label-position="right">
            <el-form-item label="Access Key ID" prop="access_key" :rules="{required: true, message: 'Access Key ID不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qiniu.access_key"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qiniu.access_key)}}</span>
              <div class="form-help">
                用于签名的公钥, 从
                <a target="_blank" class="orders-blue" href="https://portal.qiniu.com/user/key">https://portal.qiniu.com/user/key</a> 获取
              </div>
            </el-form-item>
            <el-form-item label="Access Key Secret" prop="secret_key" :rules="{required: true, message: 'Access Key Secret不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qiniu.secret_key"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qiniu.secret_key)}}</span>
              <div class="form-help">
                用于签名的私钥, 从
                <a target="_blank" class="orders-blue" href="https://portal.qiniu.com/user/key">https://portal.qiniu.com/user/key</a> 获取
              </div>
            </el-form-item>
            <el-form-item label="存储空间 (bucket)" prop="bucket" :rules="{required: true, message: 'bucket不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qiniu.bucket"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qiniu.bucket)}}</span>
              <div class="form-help">空间名称</div>
            </el-form-item>
            <el-form-item label="访问url" prop="domain" :rules="{required: true, message: '访问url不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qiniu.domain"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qiniu.domain)}}</span>
              <div class="form-help">请以HTTPS开头</div>
            </el-form-item>
          </el-form>
        </div>
      </section>
      <section v-if="formFormatData.formData.default === 'qcloud'">
        <div class="wlm-form-content">
          <el-form ref="qcloud" :model="formFormatData.formData.engine.qcloud" size="small" label-width="140px" class="retail-form" label-position="right">
            <el-form-item label="Secret ID" prop="secret_id" :rules="{required: true, message: 'Secret ID不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.secret_id"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.secret_id)}}</span>
            </el-form-item>
            <el-form-item label="Secret Key" prop="secret_key" :rules="{required: true, message: 'Secret Key不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.secret_key"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.secret_key)}}</span>
            </el-form-item>
            <el-form-item label="存储空间 (bucket)" prop="bucket" :rules="{required: true, message: 'bucket不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.bucket"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.bucket)}}</span>
              <div class="form-help">空间名称</div>
            </el-form-item>
            <el-form-item label="地域" prop="region" :rules="{required: true, message: 'App ID不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.region"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.region)}}</span>
              <div class="form-help">请填写地域简称，例如：ap-beijing、ap-hongkong、eu-frankfurt</div>
            </el-form-item>
            <el-form-item label="访问url" prop="domain" :rules="{required: true, message: '访问url不能为空', trigger: 'blur'}">
              <el-input @blur="accessShow=false" v-if="accessShow" v-model="formFormatData.formData.engine.qcloud.domain"></el-input>
              <span @click="accessShow=true" class="beforeText" v-if="!accessShow">{{hideStar(formFormatData.formData.engine.qcloud.domain)}}</span>
              <div class="form-help">请以HTTPS开头</div>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>
    <div class="wlm-form">
      <div class="wlm-form-hearder flex-row flex-justify-b">
        <span>上传js接口文件</span>
      </div>
      <section>
        <div class="wlm-form-content">
          <el-form ref="jsFile" size="small" label-width="140px" class="retail-form" label-position="right">
            <el-form-item label="上传文件">
              <el-upload ref="uploadjs" class="upload-demo input-with-select fin-min-width" accept=".js" :action="pathUrl" :multiple="false" :limit="1" :on-change="certchange" :auto-upload="true">
                <el-button type="primary" plain>点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  attachmentGet,
  attachmentSave,
  clearPosterCache,
  accountDetail
} from '@/api/setting'
import ExportFileIn from '@/components/ExportFileIn/index'
import { mapGetters } from 'vuex'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'RemoteStorage',
  components: {
    ExportFileIn
  },
  directives: {

  },
  // created(){
  //   if(!this.formFormatData.formData.default){
  //     this.formFormatData.formData.default = 'local'
  //   }
  // },
  computed: {
    hideStar(item) {
      return (item) => {
        const strArr = item.split('')
        const result = []
        if (strArr.length > 9) {
          strArr.map((item, index) => {
            if (index < 4 || index >= strArr.length - 4) {
              result.push(item)
            } else {
              result.push('*')
            }
          })
          return result.join('')
        } else {
          return item
        }
      }
    },
    ...mapGetters([
      'independent'
    ]),
    pathUrl() {
      return `${location.protocol}//${location.hostname}/${location.href.includes('addons/weliam_areashop') ? 'addons/weliam_areashop/' : ''}/web/index.php?s=uploadJs`
    },
    isIndependent() {
      return this.$store.getters.independent
    }
  },
  data() {
    return {
      accessShow: false,
      is_storage:0,
      formFormatData: {
        key: ['aliyun', 'qiniu', 'qcloud'],
        api: {
          editForm: {
            api: attachmentGet,
            params: {
              always: true
            }
          },
          submitForm: attachmentSave
        },
        formData: {
          default: 'default',
          engine: {
            qiniu: {
              access_key: '',
              secret_key: '',
              bucket: '',
              domain: ''
            },
            aliyun: {
              access_key_id: '',
              access_key_secret: '',
              bucket: '',
              domain: ''
            },
            qcloud: {
              region: '',
              secret_id: '',
              secret_key: '',
              bucket: '',
              domain: ''
            }
          }
        },
        rules: {

        }
      }
    }
  },
  created () {
      this.accountDetailbtn()
  },
  methods: {
    accountDetailbtn(){
      accountDetail().then(res=>{
        console.log("resddddddd",res.data.data.is_storage)
        this.is_storage=res.data.data.is_storage

      })
    },
    resetFieldChange() {
      if (this.formFormatData.formData.default !== 'Local') {
        this.clearValidate()
      }
    },
    clearPoster() {
      clearPosterCache().then(res => {
        const { data: { msg, code } } = res
        if (code === 1) {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
    },
    certchange(file, fileList) {
      console.log(file)
    }
  }
}
</script>

<style lang="scss" scope>
.beforeText {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  min-width: 270px;
}
.upload-demo {
  width: 50%;
  display: flex;
  align-items: center;
  /deep/ .el-upload-list__item:first-child {
    margin: 0 0 0 12px;
  }
}
</style>
